<template>
  <el-container class="container">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        :router="true"
        @select="handleSelect"
      >
        <el-menu-item route="/statistics" index="1">统计表</el-menu-item>
        <el-submenu index="2">
          <template slot="title">商品管理</template>
          <el-menu-item route="/goodClass" index="2-1">商品店铺</el-menu-item>
          <el-menu-item route="/goods" index="2-2">商品列表</el-menu-item>
          <el-menu-item route="/property" index="2-3">规格分类</el-menu-item>
          <el-menu-item route="/propertyValues" index="2-4"
            >规格明细</el-menu-item
          >
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">账号管理</template>
          <el-menu-item route="/user" index="3-1">系统账号</el-menu-item>
          <el-menu-item route="/member" index="3-2">顾客账号</el-menu-item>
        </el-submenu>
        <el-menu-item route="/customer_orders" index="4">订单管理</el-menu-item>
        <el-menu-item route="/sotre" index="5">商店管理</el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown style="margin-right: 550px; font-size: 30px; color: black">
          哈尔滨学院在线食堂管理系统
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{ $store.state.user.user }}</span>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<style>
body,
html {
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
.container {
  height: 100vh;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  data() {
    return {
      activeIndex: `1`,
    }
  },
  methods: {
    handleCommand(command) {
      this[command]()
    },
    loginOut() {
      this.$store.state.user = {}
      localStorage.removeItem(`user`)
      this.$router.push(`/login`)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>
